<template>
    <div class="info">
        <a-form :model="userInfo" label-align="right" style="width: 60%;" ref="formRef" :rules="rules" >
            <template v-if="userType == 'info'">
                <a-form-item  field="avatar" label="头像" label-col-flex="100px">
                    <a-avatar style="background: #14a9f8">A</a-avatar>
                </a-form-item>
                <a-form-item  field="email" label="邮箱" label-col-flex="100px">
                    <a-input v-model="userInfo.email" />
                </a-form-item>
                <a-form-item  field="phone" label="手机号" label-col-flex="100px">
                    <a-input v-model="userInfo.phone" />
                </a-form-item>
                <a-form-item  field="name" label="名字" label-col-flex="100px">
                    <a-input v-model="userInfo.name" />
                </a-form-item>
            </template>
            <template v-else-if="userType == 'password'">
                <a-form-item field="oldPassword" label="旧密码" validate-trigger="blur">
                    <a-input-password v-model="userInfo.oldPassword" placeholder="请输入旧密码" />
                </a-form-item>
                <a-form-item field="password" label="新密码" validate-trigger="blur">
                    <a-input-password v-model="userInfo.password" placeholder="请输入新密码" />
                </a-form-item>
                <a-form-item field="password2" label="确认新密码" validate-trigger="blur">
                    <a-input-password v-model="userInfo.password2" placeholder="请再次输入新密码" />
                </a-form-item>
            </template>
        </a-form>
        <div class="info-btn">
            <a-button type="primary" @click="handleSubmit">提交</a-button>
            <a-button @click="handleReset">重置</a-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
const props = defineProps({
    userType:{type:String,default:()=>'info'},//info:个人信息,password:密码
})

const formRef=ref(null);
const userInfo=ref({
    email:'',
    phone:'18523654789',
    name:'张三',
    oldPassword:'',
    password:'',
    password2:''
});
const rules=reactive({
    name:{required:true,message:'请输入名字'},
    phone:{required:true,message:'请输入手机号'},
    oldPassword:{required:true,message:'请输入旧密码'},
    password:{required:true,message:'请输入新密码'},
    password2:{required:true,message:'请再次输入新密码'},
})
// 获取个人信息
const getInfo=()=>{

};
// 提交
const handleSubmit=async ()=>{
    const valid=await formRef.value.validate();
    if(valid) return
    if(props.userType=='password'){
        if(userInfo.value.password!=userInfo.value.password2){
            Message.error('两次新密码输入不一致')
        }
    }

};
// 重置
const handleReset=()=>{
    formRef.value.resetFields();
};
watch(()=>props.userType,(e)=>{
    if(e=='info'){
        getInfo()
    }
    if(formRef.value){
        formRef.value.resetFields();
    }
})
</script>
<style lang="scss" scoped>
.info {
    height: 100% ;
    width: 100%;
    position: relative;
	padding: 20px 0;
    &-btn {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        border-top: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
		left: 0;
    }
}
</style>
